<template>
	<view class="">
		<view class="body">
			<view style="display: flex; justify-content: center; align-items: center;">
				<view>
					<image :src="userInfo.avatar" mode="widthFix" style="width: 100rpx;"></image>
					<view style="display: flex; justify-content: center;">{{userInfo.username}}</view>
				</view>
			</view>
			<!-- <u-line /> -->
			<view class="body row">
				<view class="body letf-text">性别</view>
				<view class="right">
					<view style="display: flex; justify-content: center; align-items: center;">
						<view class="body right-text" v-if="userInfo.gender==1">男</view>
						<view class="body right-text" v-else>女</view>
					</view>
				</view>
			</view>
			<u-line />
			<view class="body row">
				<view class="body letf-text">城市</view>
				<view class="right">
					<view style="display: flex; justify-content: center; align-items: center;">
						<view class="body right-text">{{userInfo.region}}</view>
					</view>
				</view>
			</view>
			<u-line />
			<view class="body row">
				<view class="body letf-text">拉黑</view>
				<view class="right">
					<view style="display: flex; justify-content: flex-end; align-items: center;">
						<switch @change="switch1Change" style="transform:scale(0.8)"  :checked="blackChecked" />
					</view>
				</view>
			</view>
			<u-line />
			<view class="body row">
				<view class="body letf-text">举报</view>
				<view class="right">
					<view style="display: flex; justify-content: center; align-items: center;">
						<uni-icons type="right" size="18" color="#8d8c8c" @click="open"></uni-icons>
					</view>
				</view>
			</view>
			<u-line />

		</view>

		<view>
			<uni-popup ref="popup" type="bottom" border-radius="40rpx 40rpx 0 0">
				<view class="jubao">
					<view class="jubao item" style="font-size: 30rpx; color: gray;">请选择举报原因</view>
					<view class="jubao item" @click="toReportUser(1)">低俗色情</view>
					<view class="jubao item" @click="toReportUser(2)">欺诈诱导</view>
					<view class="jubao item" @click="toReportUser(3)">辱骂骚扰</view>
					<view class="jubao item" style="padding-bottom: 20rpx;" @click="toReportUser(4)">违法犯罪</view>
					<view style="width: 100%; height: 5px; background-color: gray;"></view>
					<view class="jubao item" style="padding-bottom: 20rpx;" @click="close">取消</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		addBlacklist,
		delBlacklist,
		getUserInfo,
		getUserInfoByUUID,
		isBlackUser,
		reportUser,
		setUserAddress,
		setUserInfo
	} from "../../api/login";
	export default {

		data() {
			return {
				userInfo: {
					id: 0,
					username: '抖音用户',
					region: '',
					avatar: "../../static/logo.png",
					gender: 0, //用户性别，0: 未知；1:男性；2:女性
				},
				blackChecked: false
			}
		},
		onLoad(option) {
			let info = JSON.parse(decodeURIComponent(option.item));
			if (info) {
				console.log(info)
				getUserInfoByUUID({
					uuid: info.userId
				}).then(res => {
					console.log("这是通过uuid获取用户信息", res)
					this.userInfo = res.data
					isBlackUser({
						userId: this.userInfo.id,
						operaterId: uni.getStorageSync("userId"),
					}).then(res => {
						this.blackChecked = true
					}).catch(err => {
						this.blackChecked = false
					})
				}).catch(err => {
					console.log("这是错误", err)
				})
			}
			
		},
		onUnload() {},
		onReady() {},
		methods: {
			switch1Change(e) {
				let that = this
				if (e.detail.value) {
					uni.showModal({
						title: "提示",
						content: "拉黑后你将不会再收到该用户的信息，确定要将该用户加入黑名单吗",
						success: function(res) {
							if (res.confirm) {
								console.log("用户确定拉黑用户")
								that.addBlacklists()
							} else if (res.cancel) {
								console.log("用户点击取消")
							}
						}
					})
				} else {
					uni.showModal({
						title: "提示",
						content: "确定要将用户移除黑名单吗",
						success: function(res) {
							if (res.confirm) {
								console.log("用户确认取消拉黑")
								that.delBlacklists()
							} else if (res.cancel) {
								console.log("用户点击取消")
							}
						}
					})
				}
			},
			open() {
				this.$refs.popup.open('bottom')
			},
			close() {
				this.$refs.popup.close()
			},
			
			//拉黑用户
			addBlacklists() {
				addBlacklist({
					userId: this.userInfo.id,
					operaterId: uni.getStorageSync("userId")
				}).then(res => {
					console.log("拉黑成功", res)
					uni.showToast({
						title: "拉黑成功",
						icon: "success",
						duration: 1000
					})
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: "error",
						duration: 1000
					})
				})
			},
			//从黑名单移除该用户
			delBlacklists() {
				delBlacklist({
					userId: this.userInfo.id,
					operaterId: uni.getStorageSync("userId")
				}).then(res => {
					uni.showToast({
						title: "已从黑名单移除",
						icon: "success",
						duration: 1000
					})
				}).catch(err => {
					uni.showToast({
						title: "操作失败",
						icon: "error",
						duration: 1000
					})
				})
			},
			toReportUser(type) {
				reportUser({
					userId: this.userInfo.id,
					operaterId: uni.getStorageSync("userId"),
					type: type
				}).then(res => {
					uni.showToast({
						title: "举报成功",
						icon: "success",
						duration: 1000
					})
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: "none",
						duration: 1000
					})
				})
				this.close()
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		background-color: #fff;
		padding: 10rpx;
		border-radius: 16rpx;

		.row {
			display: flex;
			justify-content: space-between;
		}

		.letf-text {
			padding-left: 20rpx;
			font-size: 30rpx;
		}

		.right {
			display: flex;
			align-items: center;
		}

		.right-text {
			font-size: 30rpx;
		}

		.icon {
			margin-left: 10rpx
		}
	}

	.title {
		font-size: 14px;
		font-weight: bold;
		margin: 20px 0 5px 0;
	}

	.picker {
		padding: 10px;
		background-color: #fff;
		text-align: center;
	}

	.jubao {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-content: center;
		background-color: #fff;
		width: 100%;
		.item {
			padding-top: 10px;
		}
	}
</style>